<template>
    <div>
        <div style="padding-bottom: 12px; font-weight: 700;">出题——选择课程选择知识点以出题</div>

        <!-- 状态信息显示 -->
        <div v-if="currentRow || selectedKnowledge.length > 0" class="status-info">
            <div class="status-item" v-if="currentRow">
                <el-tag type="primary" size="medium">
                    <i class="el-icon-notebook-1"></i>
                    当前课程：{{ currentRow.title }}
                </el-tag>
            </div>
            <div class="status-item" v-if="selectedKnowledge.length > 0">
                <el-tag type="success" size="medium">
                    <i class="el-icon-check"></i>
                    已选知识点：{{ selectedKnowledge.length }} 个
                </el-tag>
            </div>
        </div>

        <div class="topic-creation-view"
            style="height: calc(80vh - 80px); display: flex; background: #fff; margin-top: 8px;">
            <div :class="isDataSelected ? 'course-list-select' : 'course-list'">
                <el-table height="calc(80vh - 80px)" ref="singleTable" highlight-current-row
                    @current-change="handleCurrentChange" :data="courseData" style="width: 100%">
                    <el-table-column fixed prop="title" label="名称" width="180">
                    </el-table-column>
                    <el-table-column prop="questionNum" label="题库包含题目数量" width="180">
                    </el-table-column>
                    <el-table-column prop="createTime" width="180" label="创建时间">
                    </el-table-column>
                    <el-table-column prop="content" label="内容">
                        <template slot-scope="scope">
                            <div v-html="scope.row.content"></div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div>
                <TopicCreation :select-course="currentRow" @unselect-course="handleUnselectFromChild"
                    @knowledge-change="handleKnowledgeChange" @question-generated="handleQuestionGenerated"
                    @question-saved="handleQuestionSaved" @questions-updated="handleQuestionsUpdated" />
            </div>
        </div>
    </div>
</template>

<script>
import { fetchPaging, fetchUserQuestionInfo } from '@/api/course/course';
import TopicCreation from './components/TopicCreation.vue';
import { gsap } from 'gsap';

export default {
    name: 'TopicCreationView',
    components: {
        TopicCreation
    },
    data() {
        return {
            isDataSelected: false,
            courseData: [],
            currentRow: null, // 当前选中行
            selectedKnowledge: [], // 存储选中的知识点
            generatedQuestions: [], // 存储生成的题目
        }
    },
    mounted() {
        this.fetchCourseData();

    },
    methods: {
        // 这里可以添加方法
        async fetchCourseData() {
            // 模拟获取课程数据
            let res = await fetchUserQuestionInfo().catch(err => {
                console.error("题目生成-获取课程错误", err);
                return
            });
            this.courseData = res.data;
            console.log("题目生成-获取课程", res);
        },

        // 设置当前行
        setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row);
            this.currentRow = row;
            this.animateToSelected();
        },

        unSetCurrent() {
            console.log("un");
            this.$refs.singleTable.setCurrentRow(null);
            this.currentRow = null; // 清除当前选中行
            this.animateToUnselected();
        },

        // GSAP动画 - 选中状态
        animateToSelected() {
            const container = this.$el.querySelector('.course-list');
            if (container) {
                gsap.to(container, {
                    width: '180px',
                    backgroundColor: '#f0f0f0',
                    duration: 0.5,
                    ease: "power2.out",
                    onComplete: () => {
                        this.isDataSelected = true;
                    }
                });
            }
        },

        // GSAP动画 - 未选中状态
        animateToUnselected() {
            const container = this.$el.querySelector('.course-list-select');
            if (container) {
                gsap.to(container, {
                    width: '100%',
                    backgroundColor: '#fff',
                    duration: 0.5,
                    ease: "power2.out",
                    onComplete: () => {
                        this.isDataSelected = false;
                    }
                });
            }
        },

        // 选中课程
        handleCurrentChange(val) {
            console.log(val, this.currentRow);

            // 如果 val 为 null，说明点击了同一行，需要取消选中
            if (val === null) {
                this.unSetCurrent();
                return;
            }

            // 如果已有选中行且点击的是不同行，更新选中
            if (this.currentRow && val.id !== this.currentRow.id) {
                this.currentRow = val;
                this.animateToSelected();
            }
            // 如果没有选中行，直接选中
            else if (!this.currentRow) {
                this.currentRow = val;
                this.animateToSelected();
            }
        },

        // 处理子组件发来的取消选择事件
        handleUnselectFromChild() {
            this.unSetCurrent();
        },

        // 处理知识点选择变化
        handleKnowledgeChange(selectedKnowledge) {
            this.selectedKnowledge = selectedKnowledge;
            console.log('父组件接收到知识点选择变化:', this.selectedKnowledge);

            // 这里可以添加额外的处理逻辑，比如：
            // 1. 保存到 Vuex 状态管理
            // 2. 发送到后端保存
            // 3. 触发其他组件的更新

            // 示例：如果需要将知识点数据传递给其他组件或执行其他操作
            this.$emit('knowledge-updated', this.selectedKnowledge);
        },

        // 处理题目生成事件
        handleQuestionGenerated(questionData) {
            console.log('父组件接收到生成的题目:', questionData);

            // 将生成的题目添加到列表中
            const questionItem = {
                id: Date.now(), // 临时ID
                timestamp: new Date(),
                course: this.currentRow,
                ...questionData
            };

            this.generatedQuestions.push(questionItem);

            // 显示成功消息
            this.$message.success(`成功生成${this.getQuestionTypeLabel(questionData.config.questionType)}！`);

            // 这里可以添加额外的处理逻辑：
            // 1. 保存题目到后端
            // 2. 更新UI显示
            // 3. 发送通知消息

            // 触发全局事件，其他组件可以监听
            this.$emit('question-created', questionItem);
        },

        // 处理题目保存事件
        handleQuestionSaved(questionData) {
            console.log('题目已保存:', questionData);

            // 这里可以添加保存到后端的逻辑
            // 例如调用保存API
            this.saveQuestionToBackend(questionData);
        },

        // 处理题目保存事件
        handleQuestionSaved(questionData) {
            console.log('题目已保存:', questionData);

            // 这里可以添加保存到后端的逻辑
            // 例如调用保存API
            this.saveQuestionToBackend(questionData);
        },

        // 处理题目更新事件
        handleQuestionsUpdated(questionData) {
            console.log('题目已更新:', questionData);

            // 更新对应的题目数据
            const questionIndex = this.generatedQuestions.findIndex(q =>
                q.config && q.config.questionType === questionData.config.questionType);

            if (questionIndex !== -1) {
                // 更新现有题目
                this.generatedQuestions[questionIndex] = {
                    ...this.generatedQuestions[questionIndex],
                    ...questionData,
                    updatedAt: new Date()
                };
            } else {
                // 如果找不到对应题目，则创建新的
                const questionItem = {
                    id: Date.now(),
                    timestamp: new Date(),
                    course: this.currentRow,
                    ...questionData
                };
                this.generatedQuestions.push(questionItem);
            }

            this.$message.success('题目更新成功！');

            // 可以在这里添加保存到后端的逻辑
            this.saveQuestionToBackend(questionData);

            // 触发全局事件
            this.$emit('questions-updated', questionData);
        },

        // 保存题目到后端（示例方法）
        async saveQuestionToBackend(questionData) {
            try {
                // 这里应该调用实际的后端API
                console.log('保存题目到后端:', questionData);

                // 示例API调用
                // const response = await this.$api.saveQuestion(questionData);
                // console.log('保存成功:', response);

                this.$message.success('题目保存成功！');
            } catch (error) {
                console.error('保存题目失败:', error);
                this.$message.error('保存题目失败，请重试');
            }
        },

        // 获取题目类型标签（工具方法）
        getQuestionTypeLabel(type) {
            const typeMap = {
                'choice': '单选题',
                'TF': '判断题',
                'fill': '填空题',
                'answer': '简答题'
            };
            return typeMap[type] || type;
        }
    },

}

</script>

<style>
/* 状态信息显示区域 */
.status-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #f6f9fc 0%, #e9f4ff 100%);
    border-radius: 8px;
    border: 1px solid #d9ecff;
    min-height: 44px;
    /* 确保有足够的高度 */
}

.status-item {
    display: flex;
    align-items: center;
}

.el-tag {
    height: auto;
}

.status-item .el-tag {
    font-weight: 500;
    padding: 6px 12px;
    /* 增加内边距 */
}

.status-item .el-tag i {
    margin-right: 4px;
}

.course-list-select {
    height: 100%;
    width: 180px;
    background-color: #f0f0f0;
    transition: none;
    /* 禁用CSS过渡，使用GSAP控制 */
    overflow-y: auto;
    /* 添加滚动条 */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;

    /* IE10+ */
    &::-webkit-scrollbar {
        display: none;
        /* ChromeSafari */
    }
}

.course-list {
    height: 100%;
    width: 100%;
    background-color: #fff;
    transition: none;
    /* 禁用CSS过渡，使用GSAP控制 */
    overflow-y: auto;
    /* 添加滚动条 */
}

/* 表格容器的样式优化 */
.topic-creation-view {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 表格行选中效果增强 */
:deep(.el-table__row.current-row) {
    background-color: #ecf5ff !important;
}

/* 表格悬停效果 */
:deep(.el-table__row:hover) {
    background-color: #f5f7fa;
}

/* 确保表格头部不被遮挡 */
:deep(.el-table__header-wrapper) {
    z-index: 10;
}

/* 右侧内容区域样式 */
.topic-creation-view>div:last-child {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    background: #fff;
}
</style>